<template>
    <div class="navbar bg-white shadow-md sticky top-0 z-50">
        <div class="navbar-start">
            <div class="dropdown">
                <label tabindex="0" class="btn btn-ghost lg:hidden">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
                        stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M4 6h16M4 12h8m-8 6h16" />
                    </svg>
                </label>
                <ul tabindex="0"
                    class="menu menu-compact dropdown-content mt-3 p-2 shadow-lg bg-white rounded-lg w-52 z-50">
                    <li><a :class="{ 'text-red-600 font-bold': $route.path === '/' }" href="/">首页</a></li>
                    <li><a :class="{ 'text-red-600 font-bold': $route.path === '/products' }" href="/products">产品</a></li>
                    <li><a :class="{ 'text-red-600 font-bold': $route.path === '/factory' }" href="/factory">厂家</a></li>
                    <li><a :class="{ 'text-red-600 font-bold': $route.path === '/about' }" href="/about">关于企业</a></li>
                </ul>
            </div>
            <a href="/" class="btn btn-ghost normal-case text-xl">
                <img src="/images/csverse.png" alt="消防资讯网" class="h-10 mr-2">
                <span class="text-red-700 font-bold">消防资讯网</span>
            </a>
        </div>
        <div class="navbar-center hidden lg:flex">
            <ul class="menu menu-horizontal px-1 gap-2">
                <li>
                    <a :class="{ 'text-white bg-red-700 hover:bg-red-800': $route.path === '/', 
                              'hover:bg-red-50 hover:text-red-700': $route.path !== '/' }" 
                       class="rounded-md font-medium transition-colors" href="/">首页</a>
                </li>
                <li>
                    <a :class="{ 'text-white bg-red-700 hover:bg-red-800': $route.path === '/products', 
                              'hover:bg-red-50 hover:text-red-700': $route.path !== '/products' }" 
                       class="rounded-md font-medium transition-colors" href="/products">产品</a>
                </li>
                <li>
                    <a :class="{ 'text-white bg-red-700 hover:bg-red-800': $route.path === '/factory', 
                              'hover:bg-red-50 hover:text-red-700': $route.path !== '/factory' }" 
                       class="rounded-md font-medium transition-colors" href="/factory">厂家</a>
                </li>
                <li>
                    <a :class="{ 'text-white bg-red-700 hover:bg-red-800': $route.path === '/about', 
                              'hover:bg-red-50 hover:text-red-700': $route.path !== '/about' }" 
                       class="rounded-md font-medium transition-colors" href="/about">关于企业</a>
                </li>
            </ul>
        </div>
        <div class="navbar-end">
            <div class="hidden md:flex items-center mr-4">
                <div class="text-sm text-gray-600 mr-2">客服热线:</div>
                <div class="text-red-700 font-bold">400-123-4567</div>
            </div>
            <a class="btn bg-red-700 hover:bg-red-800 text-white border-none">登录/注册</a>
        </div>
    </div>
</template>
    
<script setup>
import { useRoute } from 'vue-router'
    
const route = useRoute()
</script>
    
<style scoped>
.navbar {
    padding: 0.75rem 1.5rem;
}

.menu-horizontal > li > a {
    padding: 0.5rem 1rem;
}
</style>
    